<template>
	<view class="upload-video">
		<view class="section">
			<view class="title">
				<text>上传视频</text>
				<view v-if="form.companyVideo" class="reupload-btn" @tap="remove">重新上传</view>
			</view>
			<view v-if="form.companyVideo" class="preview">
				<video :src="form.companyVideo"></video>
			</view>
			<view v-else class="upload-btn" @tap="chooseVideo">
				<view>
					<image src="https://ywtmp.hnwytkj.com/static/images/upload.png" mode=""></image>
					<view class="text">点击上传视频文件到此处</view>
					<view class="desc">支持 MP4、MOV 等常用格式</view>
				</view>
			</view>
		</view>
		<view class="btn-box">
			<view class="btn" @tap="submit">保存</view>
		</view>
	</view>
</template>

<script>
import http from '@/utils/http.js'
export default {
	data() {
		return {
			form: {
				companyVideo: ""
			}
		}
	},
	onLoad() {
		this.getData()
	},
	methods: {
		upload(filePath) {			
			const fileName = filePath.split('/').pop()
			uni.uploadFile({
			      url: `https://ywtmp.hnwytkj.com/app-api/infra/file/upload?path=${fileName}`, //仅为示例，非真实的接口地址
			      filePath,
			      name: 'file',
			      // formData: {},
			      success: (uploadFileRes) => {
					const res = JSON.parse(uploadFileRes.data)
			        console.log(uploadFileRes.data);
					if (res.code === 0) {
						this.form.companyVideo = res.data
						// this.submit()
					}
			      },
				  fail: (res) => {
					  console.log(res)
				  }
			    });
		},
		chooseVideo() {
			uni.chooseVideo({
			    sourceType: ['album', 'camera'], //从相册选择
				success: (res) => {
					console.log(res.tempFilePath)
					this.upload(res.tempFilePath)
				}
			});				
		},
		remove() {
			this.form.companyVideo = ''
		},
		submit() {
			if (!this.form.companyVideo) {
				uni.showToast({
					title: '请上传视频',
					icon: 'none'
				});
				return false;
			}
			http({
				url: 'card/user-profile/module/update',
				method: 'put',
				data: {
					...this.form,
				}
			}).then(res => {				
				if(res.code === 0) {
					uni.showToast({
						title: '保存成功',
						icon: "success"
					});
					this.getData()
				}
			})
		},
		getData() {
			http({
				url: 'card/user-profile/get'
			}).then(res => {				
				if(res.code === 0) {
					this.form = {
						...res.data.companyProfileDO
					}
				}
			})		
		}
	},
}
</script>

<style lang="scss" scoped>
	.upload-video {
		background: #F0F0F4;
		min-height: 100vh;
		padding: 20rpx 20rpx calc(140rpx + var(--safe-area-inset-bottom));
		box-sizing: border-box;
		font-family: PingFang SC;
		.section {
			// height: 396rpx;
			background: #FFFFFF;
			border-radius: 40rpx;
			padding: 40rpx;
			.title {
				height: 60rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.reupload-btn {
					width: 160rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					background: #4B73FF;
					border-radius: 20rpx;
					font-weight: bold;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
			.upload-btn {
				width: 630rpx;
				height: 261rpx;
				background: #E6ECFF;
				border-radius: 20rpx;
				border: 1rpx dashed #4B73FF;
				box-sizing: border-box;
				font-weight: 500;
				font-size: 28rpx;
				color: #4B73FF;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				image {
					width: 93rpx;
					height: 75rpx;
				}
				.text {
					margin: 29rpx 0 19rpx;
				}
				.desc {
					font-weight: 500;
					font-size: 22rpx;
					color: #B7BED6;
				}
			}
			.preview {
				video {
					width: 100%;
				}
			}
		}
		.btn-box {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 20rpx 20rpx calc(20rpx + var(--safe-area-inset-bottom));
			box-sizing: border-box;
			background-color: #FFFFFF;
			.btn {
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				background: #4B73FF;
				border-radius: 20rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
				// margin-top: 42rpx;
			}
		}
	}
</style>